<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="140px">
      <div style="height: 100px;overflow: hidden scroll;">
        <el-button type="primary" @click="showSelectSetting = true">
          搜索条件配置
        </el-button>
        <el-form-item v-if="isShowSearch('storeName')" label="店铺" prop="storeName">
          <el-select v-model="queryParams.storeName" filterable placeholder="请选择店铺" clearable>
            <el-option
              v-for="item in storeList"
              :key="item.id"
              :label="item.storeName"
              :value="item.storeName">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item v-if="isShowSearch('statDate')" label="统计日期" prop="statDate">
          <el-date-picker
            v-model="queryParams.statDateRange"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item v-if="isShowSearch('goodsId')" label="商品ID(商品)" prop="goodsId">
          <el-input v-model="queryParams.goodsId" placeholder="请输入商品ID"/>
        </el-form-item>
        <el-form-item v-if="isShowSearch('upNewDate')" label="上新日期(商品)" prop="upNewDate">
          <el-date-picker
            v-model="queryParams.upNewDateRange"
            @change="upNewDateChange"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item v-if="isShowSearch('goodsLabel')" label="商品标签(商品)" prop="goodsLabel">
          <el-input v-model="queryParams.goodsLabel" placeholder="请输入"/>
        </el-form-item>
        <el-form-item v-if="isShowSearch('goodsVisitorNumber')" label="商品访客数(商品)" prop="goodsVisitorNumber">
          <el-input v-model="queryParams.goodsVisitorNumberMin" placeholder="请输入" style="width: 150px;"></el-input>
          <span> - </span>
          <el-input v-model="queryParams.goodsVisitorNumberMax" placeholder="请输入" style="width: 150px;"></el-input>
        </el-form-item>
        <el-form-item v-if="isShowSearch('averageStopDuration')" label="平均停留时长(商品)" prop="averageStopDuration">
          <el-input v-model="queryParams.averageStopDurationMin" placeholder="请输入" style="width: 150px;"></el-input>
          <span> - </span>
          <el-input v-model="queryParams.averageStopDurationMax" placeholder="请输入" style="width: 150px;"></el-input>
        </el-form-item>
        <el-form-item v-if="isShowSearch('goodsDetailJumpRatio')" label="商品详情页跳出率(商品)"
                      prop="goodsDetailJumpRatio">
          <el-input v-model="queryParams.goodsDetailJumpRatioMin" placeholder="请输入" style="width: 150px;"></el-input>
          <span> - </span>
          <el-input v-model="queryParams.goodsDetailJumpRatioMax" placeholder="请输入" style="width: 150px;"></el-input>
        </el-form-item>
        <el-form-item v-if="isShowSearch('goodsCollectPeopleNumber')" label="商品收藏人数(商品)"
                      prop="goodsCollectPeopleNumber">
          <el-input v-model="queryParams.goodsCollectPeopleNumberMin" placeholder="请输入"
                    style="width: 150px;"></el-input>
          <span> - </span>
          <el-input v-model="queryParams.goodsCollectPeopleNumberMax" placeholder="请输入"
                    style="width: 150px;"></el-input>
        </el-form-item>
        <el-form-item v-if="isShowSearch('goodsAddPurchasePeopleNumber')" label="商品加购人数(商品)"
                      prop="goodsAddPurchasePeopleNumber">
          <el-input v-model="queryParams.goodsAddPurchasePeopleNumberMin" placeholder="请输入"
                    style="width: 150px;"></el-input>
          <span> - </span>
          <el-input v-model="queryParams.goodsAddPurchasePeopleNumberMax" placeholder="请输入"
                    style="width: 150px;"></el-input>
        </el-form-item>
        <el-form-item v-if="isShowSearch('payBuyerNumber')" label="支付买家数(商品)" prop="payBuyerNumber">
          <el-input v-model="queryParams.payBuyerNumberMin" placeholder="请输入" style="width: 150px;"></el-input>
          <span> - </span>
          <el-input v-model="queryParams.payBuyerNumberMax" placeholder="请输入" style="width: 150px;"></el-input>
        </el-form-item>
        <el-form-item v-if="isShowSearch('payNumber')" label="支付件数(商品)" prop="payNumber">
          <el-input v-model="queryParams.payNumberMin" placeholder="请输入" style="width: 150px;"></el-input>
          <span> - </span>
          <el-input v-model="queryParams.payNumberMax" placeholder="请输入" style="width: 150px;"></el-input>
        </el-form-item>
        <el-form-item v-if="isShowSearch('payAmount')" label="支付金额(商品)" prop="payAmount">
          <el-input v-model="queryParams.payAmountMin" placeholder="请输入" style="width: 150px;"></el-input>
          <span> - </span>
          <el-input v-model="queryParams.payAmountMax" placeholder="请输入" style="width: 150px;"></el-input>
        </el-form-item>
        <el-form-item v-if="isShowSearch('payOldBuyerNumber')" label="支付老买家数(商品)" prop="payOldBuyerNumber">
          <el-input v-model="queryParams.payOldBuyerNumberMin" placeholder="请输入" style="width: 150px;"></el-input>
          <span> - </span>
          <el-input v-model="queryParams.payOldBuyerNumberMax" placeholder="请输入" style="width: 150px;"></el-input>
        </el-form-item>
        <el-form-item v-if="isShowSearch('oldBuyerPayAmount')" label="老买家支付金额(商品)" prop="oldBuyerPayAmount">
          <el-input v-model="queryParams.oldBuyerPayAmountMin" placeholder="请输入" style="width: 150px;"></el-input>
          <span> - </span>
          <el-input v-model="queryParams.oldBuyerPayAmountMax" placeholder="请输入" style="width: 150px;"></el-input>
        </el-form-item>
        <el-form-item v-if="isShowSearch('visitorAverageValue')" label="访客平均价值(商品)" prop="visitorAverageValue">
          <el-input v-model="queryParams.visitorAverageValueMin" placeholder="请输入" style="width: 150px;"></el-input>
          <span> - </span>
          <el-input v-model="queryParams.visitorAverageValueMax" placeholder="请输入" style="width: 150px;"></el-input>
        </el-form-item>
        <el-form-item v-if="isShowSearch('successRefundAmount')" label="成功退款金额(商品)" prop="successRefundAmount">
          <el-input v-model="queryParams.successRefundAmountMin" placeholder="请输入" style="width: 150px;"></el-input>
          <span> - </span>
          <el-input v-model="queryParams.successRefundAmountMax" placeholder="请输入" style="width: 150px;"></el-input>
        </el-form-item>
        <el-form-item v-if="isShowSearch('competitiveScore')" label="竞争力评分(商品)" prop="competitiveScore">
          <el-input v-model="queryParams.competitiveScoreMin" placeholder="请输入" style="width: 150px;"></el-input>
          <span> - </span>
          <el-input v-model="queryParams.competitiveScoreMax" placeholder="请输入" style="width: 150px;"></el-input>
        </el-form-item>
        <el-form-item v-if="isShowSearch('yearPayAmount')" label="年累计支付金额(商品)" prop="yearPayAmount">
          <el-input v-model="queryParams.yearPayAmountMin" placeholder="请输入" style="width: 150px;"></el-input>
          <span> - </span>
          <el-input v-model="queryParams.yearPayAmountMax" placeholder="请输入" style="width: 150px;"></el-input>
        </el-form-item>
        <el-form-item v-if="isShowSearch('searchPayRatio')" label="搜索引导支付转化率(商品)" prop="searchPayRatio">
          <el-input v-model="queryParams.searchPayRatioMin" placeholder="请输入" style="width: 150px;"></el-input>
          <span> - </span>
          <el-input v-model="queryParams.searchPayRatioMax" placeholder="请输入" style="width: 150px;"></el-input>
        </el-form-item>
        <el-form-item v-if="isShowSearch('searchVisitorNumber')" label="搜索引导访客数(商品)"
                      prop="searchVisitorNumber">
          <el-input v-model="queryParams.searchVisitorNumberMin" placeholder="请输入" style="width: 150px;"></el-input>
          <span> - </span>
          <el-input v-model="queryParams.searchVisitorNumberMax" placeholder="请输入" style="width: 150px;"></el-input>
        </el-form-item>
        <el-form-item v-if="isShowSearch('searchBuyerNumber')" label="搜索引导支付买家数(商品)"
                      prop="searchBuyerNumber">
          <el-input v-model="queryParams.searchBuyerNumberMin" placeholder="请输入" style="width: 150px;"></el-input>
          <span> - </span>
          <el-input v-model="queryParams.searchBuyerNumberMax" placeholder="请输入" style="width: 150px;"></el-input>
        </el-form-item>

        <!--全站推-->
        <el-form-item v-if="isShowSearch('costAmount')" label="花费(全站推)" prop="costAmount">
          <el-input v-model="queryParams.costAmountMin" placeholder="请输入" style="width: 150px;"></el-input>
          <span> - </span>
          <el-input v-model="queryParams.costAmountMax" placeholder="请输入" style="width: 150px;"></el-input>
        </el-form-item>
        <el-form-item v-if="isShowSearch('totalTransactionAmount')" label="总成交金额(全站推)"
                      prop="totalTransactionAmount">
          <el-input v-model="queryParams.totalTransactionAmountMin" placeholder="请输入"
                    style="width: 150px;"></el-input>
          <span> - </span>
          <el-input v-model="queryParams.totalTransactionAmountMax" placeholder="请输入"
                    style="width: 150px;"></el-input>
        </el-form-item>
        <el-form-item v-if="isShowSearch('actualProductionRatio')" label="实际投产比(全站推)"
                      prop="actualProductionRatio">
          <el-input v-model="queryParams.actualProductionRatioMin" placeholder="请输入"
                    style="width: 150px;"></el-input>
          <span> - </span>
          <el-input v-model="queryParams.actualProductionRatioMax" placeholder="请输入"
                    style="width: 150px;"></el-input>
        </el-form-item>
        <el-form-item v-if="isShowSearch('impressions')" label="展现量(全站推)" prop="impressions">
          <el-input v-model="queryParams.impressionsMin" placeholder="请输入" style="width: 150px;"></el-input>
          <span> - </span>
          <el-input v-model="queryParams.impressionsMax" placeholder="请输入" style="width: 150px;"></el-input>
        </el-form-item>
        <el-form-item v-if="isShowSearch('hits')" label="点击量(全站推)" prop="hits">
          <el-input v-model="queryParams.hitsMin" placeholder="请输入" style="width: 150px;"></el-input>
          <span> - </span>
          <el-input v-model="queryParams.hitsMax" placeholder="请输入" style="width: 150px;"></el-input>
        </el-form-item>
        <el-form-item v-if="isShowSearch('clickRate')" label="点击率(全站推)" prop="clickRate">
          <el-input v-model="queryParams.clickRateMin" placeholder="请输入" style="width: 150px;"></el-input>
          <span> - </span>
          <el-input v-model="queryParams.clickRateMax" placeholder="请输入" style="width: 150px;"></el-input>
        </el-form-item>
        <el-form-item v-if="isShowSearch('averageClickCost')" label="平均点击花费(全站推)" prop="averageClickCost">
          <el-input v-model="queryParams.averageClickCostMin" placeholder="请输入" style="width: 150px;"></el-input>
          <span> - </span>
          <el-input v-model="queryParams.averageClickCostMax" placeholder="请输入" style="width: 150px;"></el-input>
        </el-form-item>
        <el-form-item v-if="isShowSearch('totalTransactionsNumber')" label="总成交笔数(全站推)"
                      prop="totalTransactionsNumber">
          <el-input v-model="queryParams.totalTransactionsNumberMin" placeholder="请输入"
                    style="width: 150px;"></el-input>
          <span> - </span>
          <el-input v-model="queryParams.totalTransactionsNumberMax" placeholder="请输入"
                    style="width: 150px;"></el-input>
        </el-form-item>
        <el-form-item v-if="isShowSearch('clickConversionRate')" label="点击转化率(全站推)" prop="clickConversionRate">
          <el-input v-model="queryParams.clickConversionRateMin" placeholder="请输入" style="width: 150px;"></el-input>
          <span> - </span>
          <el-input v-model="queryParams.clickConversionRateMax" placeholder="请输入" style="width: 150px;"></el-input>
        </el-form-item>
        <el-form-item v-if="isShowSearch('totalShopCartNumber')" label="总购物车数(全站推)" prop="totalShopCartNumber">
          <el-input v-model="queryParams.totalShopCartNumberMin" placeholder="请输入" style="width: 150px;"></el-input>
          <span> - </span>
          <el-input v-model="queryParams.totalShopCartNumberMax" placeholder="请输入" style="width: 150px;"></el-input>
        </el-form-item>

        <!--无界-->
        <el-form-item v-if="isShowSearch('unClickConversionRate')" label="点击转化率(无界)"
                      prop="unClickConversionRate">
          <el-input v-model="queryParams.unClickConversionRateMin" placeholder="请输入"
                    style="width: 150px;"></el-input>
          <span> - </span>
          <el-input v-model="queryParams.unClickConversionRateMax" placeholder="请输入"
                    style="width: 150px;"></el-input>
        </el-form-item>
        <el-form-item v-if="isShowSearch('inputOutputRatio')" label="投入产出比(无界)" prop="inputOutputRatio">
          <el-input v-model="queryParams.inputOutputRatioMin" placeholder="请输入" style="width: 150px;"></el-input>
          <span> - </span>
          <el-input v-model="queryParams.inputOutputRatioMax" placeholder="请输入" style="width: 150px;"></el-input>
        </el-form-item>
        <el-form-item v-if="isShowSearch('wangConsultNumber')" label="旺旺咨询量(无界)" prop="wangConsultNumber">
          <el-input v-model="queryParams.wangConsultNumberMin" placeholder="请输入" style="width: 150px;"></el-input>
          <span> - </span>
          <el-input v-model="queryParams.wangConsultNumberMax" placeholder="请输入" style="width: 150px;"></el-input>
        </el-form-item>
        <el-form-item v-if="isShowSearch('dealPeopleNumber')" label="成交人数(无界)" prop="dealPeopleNumber">
          <el-input v-model="queryParams.dealPeopleNumberMin" placeholder="请输入" style="width: 150px;"></el-input>
          <span> - </span>
          <el-input v-model="queryParams.dealPeopleNumberMax" placeholder="请输入" style="width: 150px;"></el-input>
        </el-form-item>
      </div>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery(true)">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        <el-button icon="el-icon-download" @click="handleExport">下载</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8" ref="toolbar">
      <el-col :span="1.5">
        <el-button type="primary" @click="showSetting = true">
          动态表头
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" @click="getSearchByDate(1)">
          日
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" @click="getSearchByDate(2)">
          周
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" @click="getSearchByDate(3)">
          月
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" @click="getSearchByDate(4)">
          年
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          :disabled="multiple"
          @click="handleDelete"
        >删除
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <div ref="divTable">
      <!-- 表格主体 -->
      <el-table :height="showSearch?'55vh':'68vh'" :key="dataTotal" :summary-method="getScoreSummaries"
                :show-summary="showSummary" v-loading="loading" :data="goodsIndicatorsList" border style="width: 100%"
                @sort-change='sortChange' @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column
          width="120px"
          v-for="column in getVisibleColumns()"
          :key="column.prop"
          :prop="column.prop"
          :label="column.label"
          sortable='custom'>
          <template slot="header" slot-scope="scope">
            {{ scope.column.label.length > 4 ? scope.column.label.substr(0, 4) + '...' : scope.column.label }}
            <el-tooltip v-if="scope.column.label.length>4" class="item" effect="dark" :content="scope.column.label"
                        placement="top">
              <i class="el-icon-info"></i>
            </el-tooltip>
            <el-tooltip v-if="column.tooltip" class="item" effect="dark" :content="column.content" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            <el-image
              v-if="column.prop === 'imgUrl'"
              style="width: 100px; height: 100px"
              :src="scope.row.imgUrl"
              :preview-src-list="[scope.row.imgUrl]">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
            <div v-else>
              <el-tooltip class="item" effect="dark" :content="String(scope.row[column.prop])" placement="top">
                <span>{{ scope.row[column.prop] }}</span>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="120px">
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
            >修改
            </el-button>
            <el-button
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :pageRefs="this.$refs"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        :page-sizes="queryParams.pageSizes"
        @pagination="getList"
      />
    </div>

    <!-- 表头设置弹窗-->
    <el-dialog title="动态表头设置" :visible.sync="showSetting">
      <el-button type="primary" icon="el-icon-delete" @click="cancelSelectedHeaders">取消选择</el-button>
      <el-button type="primary" icon="el-icon-collection-tag" @click="useSelectedHeaders">常用指标</el-button>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>商品指标</span>
        </div>
        <el-row>
          <el-checkbox-group v-model="selectedHeaders">
            <el-col :span="6" v-for="(column,index) in allColumns" :key="column.prop">
              <el-checkbox v-if="index>=0&&index<=43" :label="column.prop"> {{ column.label }}</el-checkbox>
            </el-col>
          </el-checkbox-group>
        </el-row>
      </el-card>

      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>全站推指标</span>
        </div>
        <el-row>
          <el-checkbox-group v-model="selectedHeaders">
            <el-col :span="6" v-for="(column,index) in allColumns" :key="column.prop">
              <el-checkbox v-if="index>=44&&index<69" :label="column.prop"> {{ column.label }}</el-checkbox>
            </el-col>
          </el-checkbox-group>
        </el-row>
      </el-card>

      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>无界指标</span>
        </div>
        <el-row>
          <el-checkbox-group v-model="selectedHeaders">
            <el-col :span="6" v-for="(column,index) in allColumns" :key="column.prop">
              <el-checkbox v-if="index>=69" :label="column.prop"> {{ column.label }}</el-checkbox>
            </el-col>
          </el-checkbox-group>
        </el-row>
      </el-card>

      <span slot="footer">
        <el-button @click="showSetting = false">取消</el-button>
        <el-button type="primary" @click="saveSettings">保存</el-button>
      </span>
    </el-dialog>

    <!-- 添加或修改商品指标数据对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="上新日期" prop="upNewDate">
          <el-date-picker clearable
                          v-model="form.upNewDate"
                          type="datetime"
                          format="yyyy-MM-dd HH:mm:ss"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          placeholder="请选择上新日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="商品标签" prop="goodsLabel">
          <el-input v-model="form.goodsLabel" placeholder="请输入商品标签"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 搜索条件配置弹窗 -->
    <el-dialog title="搜索条件配置" :visible.sync="showSelectSetting">
      <el-row>
        <el-checkbox-group v-model="selectedItems">
          <el-col :span="6" v-for="(colum,index) in allSelectItems" :key="colum.prop">
            <el-checkbox
              v-if="index<=2"
              :label="colum.prop"
            >
              {{ colum.label }}
            </el-checkbox>
          </el-col>
        </el-checkbox-group>
      </el-row>

      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>商品指标</span>
        </div>
        <el-row>
          <el-checkbox-group v-model="selectedItems">
            <el-col :span="6" v-for="(column,index) in allSelectItems" :key="column.prop">
              <el-checkbox v-if="index>2&&index<=21" :label="column.prop"> {{ column.label }}</el-checkbox>
            </el-col>
          </el-checkbox-group>
        </el-row>
      </el-card>

      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>全站推指标</span>
        </div>
        <el-row>
          <el-checkbox-group v-model="selectedItems">
            <el-col :span="6" v-for="(column,index) in allSelectItems" :key="column.prop">
              <el-checkbox v-if="index>21&&index<=31" :label="column.prop"> {{ column.label }}</el-checkbox>
            </el-col>
          </el-checkbox-group>
        </el-row>
      </el-card>

      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>无界指标</span>
        </div>
        <el-row>
          <el-checkbox-group v-model="selectedItems">
            <el-col :span="6" v-for="(column,index) in allSelectItems" :key="column.prop">
              <el-checkbox v-if="index>31" :label="column.prop"> {{ column.label }}</el-checkbox>
            </el-col>
          </el-checkbox-group>
        </el-row>
      </el-card>
      <span slot="footer">
        <el-button @click="showSelectSetting = false">取消</el-button>
        <el-button type="primary" @click="saveSelectSettings">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  addGoodsIndicators,
  delGoodsIndicators,
  editIndicatorsInfo,
  exportExcel,
  getCollectData,
  getIndicatorsInfo,
  listGoodsIndicators
} from "@/api/business/goodsIndicators";
import ResizeMixin from "@/layout/mixin/ResizeHandler";
import {getStoreList} from "@/api/business/storeIndicators";
import {parseTime} from "../../../utils/basic";

export default {
  name: "GoodsIndicators",
  mixins: [ResizeMixin],
  data() {
    return {
      // div高度
      divHeight: 0,
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: false,
      // 总条数
      total: 0,
      // 商品指标数据表格数据
      goodsIndicatorsList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        pageSizes: [10, 20, 50, 100, 500],
        storeName: null,
        statDateRange: null,
        statDateStart: null,
        statDateEnd: null,
        upNewDateRange: null,
        upNewDateStart: null,
        upNewDateEnd: null,
        goodsId: null,
        goodsVisitorNumberMin: null,
        goodsVisitorNumberMax: null,
        averageStopDurationMin: null,
        averageStopDurationMax: null,
        goodsDetailJumpRatioMin: null,
        goodsDetailJumpRatioMax: null,
        goodsCollectPeopleNumberMin: null,
        goodsCollectPeopleNumberMax: null,
        goodsAddPurchasePeopleNumberMin: null,
        goodsAddPurchasePeopleNumberMax: null,
        payBuyerNumberMin: null,
        payBuyerNumberMax: null,
        payNumberMin: null,
        payNumberMax: null,
        payAmountMin: null,
        payAmountMax: null,
        payOldBuyerNumberMin: null,
        payOldBuyerNumberMax: null,
        oldBuyerPayAmountMin: null,
        oldBuyerPayAmountMax: null,
        visitorAverageValueMin: null,
        visitorAverageValueMax: null,
        successRefundAmountMin: null,
        successRefundAmountMax: null,
        competitiveScoreMin: null,
        competitiveScoreMax: null,
        yearPayAmountMin: null,
        yearPayAmountMax: null,
        searchPayRatioMin: null,
        searchPayRatioMax: null,
        searchVisitorNumberMin: null,
        searchVisitorNumberMax: null,
        searchBuyerNumberMin: null,
        searchBuyerNumberMax: null,
        costAmountMin: null,
        costAmountMax: null,
        totalTransactionAmountMin: null,
        totalTransactionAmountMax: null,
        actualProductionRatioMin: null,
        actualProductionRatioMax: null,
        impressionsMin: null,
        impressionsMax: null,
        hitsMin: null,
        hitsMax: null,
        clickRateMin: null,
        clickRateMax: null,
        averageClickCostMin: null,
        averageClickCostMax: null,
        totalTransactionsNumberMin: null,
        totalTransactionsNumberMax: null,
        clickConversionRateMin: null,
        clickConversionRateMax: null,
        totalShopCartNumberMin: null,
        totalShopCartNumberMax: null,
        goodsLabel: null,
        unClickConversionRateMin: null,
        unClickConversionRateMax: null,
        inputOutputRatioMin: null,
        inputOutputRatioMax: null,
        wangConsultNumberMin: null,
        wangConsultNumberMax: null,
        dealPeopleNumberMin: null,
        dealPeopleNumberMax: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        upNewDate: [
          {required: true, message: "上新日期不能为空", trigger: "blur"}
        ]
      },
      //店铺列表
      storeList: [],
      // 全部可用列配置
      allColumns: [
        {label: '店铺', prop: 'storeName', visible: true},
        // 商品指标数据
        {label: '统计日期', prop: 'statDate', visible: true},
        {label: '商品ID', prop: 'goodsId', visible: true},
        {label: '商品图片', prop: 'imgUrl', visible: true},
        {label: '商品名称(商品)', prop: 'goodsName', visible: true},
        {label: '上新日期(商品)', prop: 'upNewDate', visible: true},
        {label: '主商品ID(商品)', prop: 'mainGoodsId', visible: true},
        {label: '商品类型(商品)', prop: 'goodsType', visible: true},
        {label: '货号(商品)', prop: 'goodsNo', visible: false},
        {label: '商品状态(商品)', prop: 'goodsStatus', visible: false},
        {label: '商品标签(商品)', prop: 'goodsLabel', visible: false},
        {label: '商品访客数(商品)', prop: 'goodsVisitorNumber', visible: false},
        {label: '商品浏览量(商品)', prop: 'goodsPageViewNumber', visible: false},
        {
          label: '平均停留时长(商品)',
          prop: 'averageStopDuration',
          visible: false,
          tooltip: true,
          content: '平均停留时长*商品访客数的合计/商品访客数的合计'
        },
        {
          label: '商品详情页跳出率(商品)',
          prop: 'goodsDetailJumpRatio',
          visible: false,
          tooltip: true,
          content: '商品详情页跳出率*商品访客数的合计/商品访客数的合计'
        },
        {label: '商品收藏人数(商品)', prop: 'goodsCollectPeopleNumber', visible: false},
        {label: '商品加购件数(商品)', prop: 'goodsAddPurchaseNumber', visible: false},
        {label: '商品加购人数(商品)', prop: 'goodsAddPurchasePeopleNumber', visible: false},
        {label: '下单买家数(商品)', prop: 'orderBuyerNumber', visible: false},
        {label: '下单件数(商品)', prop: 'orderNumber', visible: false},
        {label: '下单金额(商品)', prop: 'orderAmount', visible: false},
        {
          label: '下单转化率(商品)',
          prop: 'orderConversionRatio',
          visible: false,
          tooltip: true,
          content: '下单买家数/商品访客数'
        },
        {label: '支付买家数(商品)', prop: 'payBuyerNumber', visible: false},
        {label: '支付件数(商品)', prop: 'payNumber', visible: false},
        {label: '支付金额(商品)', prop: 'payAmount', visible: false},
        {
          label: '商品支付转化率(商品)',
          prop: 'goodsPayConversionRatio',
          visible: false,
          tooltip: true,
          content: '支付买家数/商品访客数'
        },
        {label: '支付新买家数(商品)', prop: 'payNewBuyerNumber', visible: false},
        {label: '支付老买家数(商品)', prop: 'payOldBuyerNumber', visible: false},
        {label: '老买家支付金额(商品)', prop: 'oldBuyerPayAmount', visible: false},
        {label: '聚划算支付金额(商品)', prop: 'jhsPayAmount', visible: false},
        {
          label: '访客平均价值(商品)',
          prop: 'visitorAverageValue',
          visible: false,
          tooltip: true,
          content: '支付金额/商品访客数'
        },
        {label: '成功退款金额(商品)', prop: 'successRefundAmount', visible: false},
        {label: '竞争力评分(商品)', prop: 'competitiveScore', visible: false},
        {label: '年累计支付金额(商品)', prop: 'yearPayAmount', visible: false},
        {label: '月累计支付金额(商品)', prop: 'monthPayAmount', visible: false},
        {label: '月累计支付件数(商品)', prop: 'monthPayNumber', visible: false},
        {
          label: '搜索引导支付转化率(商品)',
          prop: 'searchPayRatio',
          visible: false,
          tooltip: true,
          content: '搜索引导支付买家数/搜索引导访客数'
        },
        {label: '搜索引导访客数(商品)', prop: 'searchVisitorNumber', visible: false},
        {label: '搜索引导支付买家数(商品)', prop: 'searchBuyerNumber', visible: false},
        {
          label: '结构化详情引导转化率(商品)',
          prop: 'structuredDetailConversionRatio',
          visible: false,
          tooltip: true,
          content: '平均值'
        },
        {
          label: '结构化详情引导成交占比(商品)',
          prop: 'structuredDetailDealProportion',
          visible: false,
          tooltip: true,
          content: '平均值'
        },
        {
          label: '推广花费(商品)',
          prop: 'promotionExpenses',
          visible: false,
          tooltip: true,
          content: '全站推花费+无界花费'
        },
        {
          label: '推广投产比(商品)',
          prop: 'promotionRoi',
          visible: false,
          tooltip: true,
          content: '（全站总成交金额+无界总成交金额）/（全站总花费+无界总花费）'
        },
        {
          label: '推广占比(商品)',
          prop: 'promotionRatio',
          visible: false,
          tooltip: true,
          content: '（全站总花费+无界总花费）/（支付金额-成功退款金额）'
        },
        // 全站推指标数据
        {label: '主体类型(全站推)', prop: 'mainBodyType', visible: false},
        {label: '主体名称(全站推)', prop: 'mainBodyName', visible: false},
        {label: '花费(全站推)', prop: 'costAmount', visible: false},
        {label: '总成交金额(全站推)', prop: 'totalTransactionAmount', visible: false},
        {
          label: '实际投产比(全站推)',
          prop: 'actualProductionRatio',
          visible: false,
          tooltip: true,
          content: '总成交金额/花费'
        },
        {label: '展现量(全站推)', prop: 'impressions', visible: false},
        {label: '点击量(全站推)', prop: 'hits', visible: false},
        {label: '点击率(全站推)', prop: 'clickRate', visible: false, tooltip: true, content: '点击量/展现量'},
        {
          label: '平均点击花费(全站推)',
          prop: 'averageClickCost',
          visible: false,
          tooltip: true,
          content: '花费/点击量'
        },
        {
          label: '千次展现花费(全站推)',
          prop: 'thousandShowCost',
          visible: false,
          tooltip: true,
          content: '花费/展现量*1000'
        },
        {label: '总成交笔数(全站推)', prop: 'totalTransactionsNumber', visible: false},
        {
          label: '点击转化率(全站推)',
          prop: 'clickConversionRate',
          visible: false,
          tooltip: true,
          content: '总成交笔数/点击量'
        },
        {label: '总购物车数(全站推)', prop: 'totalShopCartNumber', visible: false},
        {label: '收藏宝贝数(全站推)', prop: 'collectTreasureNumber', visible: false},
        {label: '宝贝收藏加购数(全站推)', prop: 'collectTreasureBuyNumber', visible: false},
        {label: '助推展现量(全站推)', prop: 'boostShowNumber', visible: false},
        {label: '助推带动点击量(全站推)', prop: 'boostClickNumber', visible: false},
        {label: '直接成交金额(全站推)', prop: 'directBusinessAmount', visible: false},
        {label: '直接成交笔数(全站推)', prop: 'directBusinessNumber', visible: false},
        {label: '总预售成交金额(全站推)', prop: 'totalPreSaleAmount', visible: false},
        {label: '总预售成交笔数(全站推)', prop: 'totalPreSaleNumber', visible: false},
        {label: '直接预售成交金额(全站推)', prop: 'directPreSaleAmount', visible: false},
        {label: '直接预售成交笔数(全站推)', prop: 'directPreSaleNumber', visible: false},
        {
          label: '含预售投产比(全站推)',
          prop: 'preSaleRatio',
          visible: false,
          tooltip: true,
          content: '总成交金额/花费'
        },
        {label: '投产比(全站推)', prop: 'wholeRoi', visible: false, tooltip: true, content: '总成交金额/花费'},
        //无界指标数据
        {label: '场景ID(无界)', prop: 'sceneId', visible: false},
        {label: '场景名称(无界)', prop: 'sceneName', visible: false},
        {label: '原二级场景ID(无界)', prop: 'originalSceneId', visible: false},
        {label: '原二级场景名字(无界)', prop: 'originalSceneName', visible: false},
        {label: '计划ID(无界)', prop: 'planId', visible: false},
        {label: '计划名字(无界)', prop: 'planName', visible: false},
        {label: '单元ID(无界)', prop: 'unitId', visible: false},
        {label: '单元名字(无界)', prop: 'unitName', visible: false},
        {label: '主体类型(无界)', prop: 'unMainBodyType', visible: false},
        {label: '主体名称(无界)', prop: 'unMainBodyName', visible: false},
        {label: '展现量(无界)', prop: 'unImpressions', visible: false},
        {label: '点击量(无界)', prop: 'clickNumber', visible: false},
        {label: '花费(无界)', prop: 'spend', visible: false},
        {label: '点击率(无界)', prop: 'clickRatio', visible: false, tooltip: true, content: '点击量/展现量'},
        {label: '平均点击花费(无界)', prop: 'averageClickSpend', visible: false, tooltip: true, content: '花费/点击量'},
        {
          label: '千次展现花费(无界)',
          prop: 'thousandShowSpend',
          visible: false,
          tooltip: true,
          content: '花费/展现量*1000'
        },
        {label: '总预售成交金额(无界)', prop: 'unTotalPresaleAmount', visible: false},
        {label: '总预售成交笔数(无界)', prop: 'unTotalPresaleNumber', visible: false},
        {label: '直接预售成交金额(无界)', prop: 'unDirectPresaleAmount', visible: false},
        {label: '直接预售成交笔数(无界)', prop: 'unDirectPresaleNumber', visible: false},
        {label: '间接预售成交金额(无界)', prop: 'indirectPresaleAmount', visible: false},
        {label: '间接预售成交笔数(无界)', prop: 'indirectPresaleNumber', visible: false},
        {label: '直接成交金额(无界)', prop: 'directAmount', visible: false},
        {label: '间接成交金额(无界)', prop: 'indirectAmount', visible: false},
        {label: '总成交金额(无界)', prop: 'totalAmount', visible: false},
        {label: '总成交笔数(无界)', prop: 'totalNumber', visible: false},
        {label: '直接成交笔数(无界)', prop: 'directNumber', visible: false},
        {label: '间接成交笔数(无界)', prop: 'indirectNumber', visible: false},
        {
          label: '点击转化率(无界)',
          prop: 'unClickConversionRate',
          visible: false,
          tooltip: true,
          content: '总成交笔数/点击量'
        },
        {
          label: '投入产出比(无界)',
          prop: 'inputOutputRatio',
          visible: false,
          tooltip: true,
          content: '总成交金额/花费'
        },
        {
          label: '总成交成本(无界)',
          prop: 'totalTransactionCost',
          visible: false,
          tooltip: true,
          content: '花费/总成交笔数'
        },
        {label: '总购物车数(无界)', prop: 'unTotalShopCartNumber', visible: false},
        {label: '直接购物车数(无界)', prop: 'directShopCartNumber', visible: false},
        {label: '间接购物车数(无界)', prop: 'indirectShopCartNumber', visible: false},
        {label: '加购率(无界)', prop: 'addPurchaseRatio', visible: false, tooltip: true, content: '总购物车数/点击量'},
        {label: '收藏宝贝数(无界)', prop: 'collectGoodsNumber', visible: false},
        {label: '收藏店铺数(无界)', prop: 'collectStoreNumber', visible: false},
        {
          label: '店铺收藏成本(无界)',
          prop: 'storeCollectCost',
          visible: false,
          tooltip: true,
          content: '花费/收藏店铺数'
        },
        {label: '总收藏加购数(无界)', prop: 'totalCollectAddNumber', visible: false},
        {
          label: '总收藏加购成本(无界)',
          prop: 'totalCollectAddCost',
          visible: false,
          tooltip: true,
          content: '花费/总收藏加购数'
        },
        {label: '宝贝收藏加购数(无界)', prop: 'goodsCollectAddNumber', visible: false},
        {label: '宝贝收藏加购成本(无界)', prop: 'goodsCollectAddCost', visible: false},
        {label: '总收藏数(无界)', prop: 'totalCollectNumber', visible: false},
        {
          label: '宝贝收藏成本(无界)',
          prop: 'goodsCollectCost',
          visible: false,
          tooltip: true,
          content: '花费/收藏宝贝数'
        },
        {label: '宝贝收藏率(无界)', prop: 'goodsCollectRatio', visible: false},
        {label: '加购成本(无界)', prop: 'addPurchaseCost', visible: false, tooltip: true, content: '花费/总购物车数'},
        {label: '拍下订单笔数(无界)', prop: 'unOrderNumber', visible: false},
        {label: '拍下订单金额(无界)', prop: 'unOrderAmount', visible: false},
        {label: '直接收藏宝贝数(无界)', prop: 'directCollectGoodsNumber', visible: false},
        {label: '间接收藏宝贝数(无界)', prop: 'indirectCollectGoodsNumber', visible: false},
        {label: '优惠券领取量(无界)', prop: 'couponReceiveNumber', visible: false},
        {label: '购物金充值笔数(无界)', prop: 'shopGoldRechargeNumber', visible: false},
        {label: '购物金充值金额(无界)', prop: 'shopGoldRechargeAmount', visible: false},
        {label: '旺旺咨询量(无界)', prop: 'wangConsultNumber', visible: false},
        {label: '引导访问量(无界)', prop: 'guideVisitNumber', visible: false},
        {label: '引导访问人数(无界)', prop: 'guideVisitPeopleNumber', visible: false},
        {label: '引导访问潜客数(无界)', prop: 'guideVisitPotentialNumber', visible: false},
        {
          label: '引导访问潜客占比(无界)',
          prop: 'guideVisitPotentialRatio',
          visible: false,
          tooltip: true,
          content: '引导访问潜客数/引导访问人数'
        },
        {label: '入会率(无界)', prop: 'joinRate', visible: false, tooltip: true, content: '入会量/点击量'},
        {label: '入会量(无界)', prop: 'joinNumber', visible: false},
        {
          label: '引导访问率(无界)',
          prop: 'guideVisitRatio',
          visible: false,
          tooltip: true,
          content: '引导访问量/展现量'
        },
        {label: '深度访问量(无界)', prop: 'depthVisitNumber', visible: false},
        {
          label: '平均访问页面数(无界)',
          prop: 'averageVisitPageNumber',
          visible: false,
          tooltip: true,
          content: '引导访问量/引导访问人数'
        },
        {label: '成交新客数(无界)', prop: 'dealNewOrderNumber', visible: false},
        {
          label: '成交新客占比(无界)',
          prop: 'dealNewOrderTatio',
          visible: false,
          tooltip: true,
          content: '成交新客数/成交用户数'
        },
        {label: '会员首购人数(无界)', prop: 'vipFirstBuyNumber', visible: false},
        {label: '会员成交金额(无界)', prop: 'vipDealAmount', visible: false},
        {label: '会员成交笔数(无界)', prop: 'vipDealNumber', visible: false},
        {label: '成交人数(无界)', prop: 'dealPeopleNumber', visible: false},
        {label: '人均成交笔数(无界)', prop: 'perCapitaDealNumber', visible: false},
        {label: '人均成交金额(无界)', prop: 'perCapitaDealAmount', visible: false},
        {label: '曝光新客数(无界)', prop: 'exposureNewPeopleNumber', visible: false},
        {label: '进店新客数(无界)', prop: 'enterNewPeopleNumber', visible: false},
        {label: '加购新客数(无界)', prop: 'addPurchaseNewPeopleNumber', visible: false},
        {label: '收藏新客数(无界)', prop: 'collectNewPeopleNumber', visible: false},
        {label: '新客支付金额(无界)', prop: 'newPeoplePayAmount', visible: false},
        {
          label: '新客点击率(无界)',
          prop: 'newPeopleClickRatio',
          visible: false,
          tooltip: true,
          content: '进店新客数/曝光新客数'
        },
        {
          label: '新客成交转化率(无界)',
          prop: 'newPeopleDealConversionRate',
          visible: false,
          tooltip: true,
          content: '成交新客数/进店新客数'
        },
        {label: '自然流量转化金额(无界)', prop: 'natureConversionAmount', visible: false},
        {label: '自然流量曝光量(无界)', prop: 'natureExposure', visible: false},
        {label: '投产比(无界)', prop: 'unRoi', visible: false, tooltip: true, content: '总成交金额/花费'}
      ],
      showSetting: false,
      // 选中的表头
      selectedHeaders: [],
      //汇总数据
      collectData: {
        statDateStart: null,
        statDateEnd: null,
        upNewDate: null,
        goodsId: null,
        goodsName: null,
        mainGoodsId: null,
        goodsType: null,
        goodsNo: null,
        goodsStatus: null,
        goodsLabel: null,
        goodsVisitorNumber: 0,
        goodsPageViewNumber: 0,
        averageStopDuration: 0,
        goodsDetailJumpRatio: 0,
        goodsCollectPeopleNumber: 0,
        goodsAddPurchaseNumber: 0,
        goodsAddPurchasePeopleNumber: 0,
        orderBuyerNumber: 0,
        orderNumber: 0,
        orderAmount: 0,
        orderConversionRatio: 0,
        payBuyerNumber: 0,
        payNumber: 0,
        payAmount: 0,
        goodsPayConversionRatio: 0,
        payNewBuyerNumber: 0,
        payOldBuyerNumber: 0,
        oldBuyerPayAmount: 0,
        jhsPayAmount: 0,
        visitorAverageValue: 0,
        successRefundAmount: 0,
        competitiveScore: 0,
        yearPayAmount: 0,
        monthPayAmount: 0,
        monthPayNumber: 0,
        searchPayRatio: 0,
        searchVisitorNumber: 0,
        searchBuyerNumber: 0,
        structuredDetailConversionRatio: 0,
        structuredDetailDealProportion: 0,
        //全站推
        mainBodyType: null,
        mainBodyName: null,
        costAmount: 0,
        totalTransactionAmount: 0,
        actualProductionRatio: 0,
        impressions: 0,
        hits: 0,
        clickRate: 0,
        averageClickCost: 0,
        thousandShowCost: 0,
        totalTransactionsNumber: 0,
        clickConversionRate: 0,
        totalShopCartNumber: 0,
        collectTreasureNumber: 0,
        collectTreasureBuyNumber: 0,
        boostShowNumber: 0,
        boostClickNumber: 0,
        directBusinessAmount: 0,
        directBusinessNumber: 0,
        totalPreSaleAmount: 0,
        totalPreSaleNumber: 0,
        directPreSaleAmount: 0,
        directPreSaleNumber: 0,
        preSaleRatio: 0,
        //无界
        sceneId: null,
        sceneName: null,
        originalSceneId: null,
        originalSceneName: null,
        planId: null,
        planName: null,
        unitId: null,
        unitName: null,
        unMainBodyType: null,
        unMainBodyName: null,
        unImpressions: 0,
        clickNumber: 0,
        spend: 0,
        clickRatio: 0,
        averageClickSpend: 0,
        thousandShowSpend: 0,
        unTotalPresaleAmount: 0,
        unTotalPresaleNumber: 0,
        unDirectPresaleAmount: 0,
        unDirectPresaleNumber: 0,
        indirectPresaleAmount: 0,
        indirectPresaleNumber: 0,
        directAmount: 0,
        indirectAmount: 0,
        totalAmount: 0,
        totalNumber: 0,
        directNumber: 0,
        indirectNumber: 0,
        unClickConversionRate: 0,
        inputOutputRatio: 0,
        totalTransactionCost: 0,
        unTotalShopCartNumber: 0,
        directShopCartNumber: 0,
        indirectShopCartNumber: 0,
        addPurchaseRatio: 0,
        collectGoodsNumber: 0,
        collectStoreNumber: 0,
        storeCollectCost: 0,
        totalCollectAddNumber: 0,
        totalCollectAddCost: 0,
        goodsCollectAddNumber: 0,
        goodsCollectAddCost: 0,
        totalCollectNumber: 0,
        goodsCollectCost: 0,
        goodsCollectRatio: 0,
        addPurchaseCost: 0,
        unOrderNumber: 0,
        unOrderAmount: 0,
        directCollectGoodsNumber: 0,
        indirectCollectGoodsNumber: 0,
        couponReceiveNumber: 0,
        shopGoldRechargeNumber: 0,
        shopGoldRechargeAmount: 0,
        wangConsultNumber: 0,
        guideVisitNumber: 0,
        guideVisitPeopleNumber: 0,
        guideVisitPotentialNumber: 0,
        guideVisitPotentialRatio: 0,
        joinRate: 0,
        joinNumber: 0,
        guideVisitRatio: 0,
        depthVisitNumber: 0,
        averageVisitPageNumber: 0,
        dealNewOrderNumber: 0,
        dealNewOrderTatio: 0,
        vipFirstBuyNumber: 0,
        vipDealAmount: 0,
        vipDealNumber: 0,
        dealPeopleNumber: 0,
        perCapitaDealNumber: 0,
        perCapitaDealAmount: 0,
        exposureNewPeopleNumber: 0,
        enterNewPeopleNumber: 0,
        addPurchaseNewPeopleNumber: 0,
        collectNewPeopleNumber: 0,
        newPeoplePayAmount: 0,
        newPeopleClickRatio: 0,
        newPeopleDealConversionRate: 0,
        natureConversionAmount: 0,
        natureExposure: 0,
        promotionExpenses: 0,
        wholeRoi: 0,
        unRoi: 0,
        promotionRoi: 0,
        promotionRatio: 0,
      },
      //展示合计
      showSummary: false,
      //控制刷新表格
      dataTotal: 0,
      //搜索条件集合
      allSelectItems: [
        {label: '店铺', prop: 'storeName'},
        {label: '统计日期', prop: 'statDate'},
        {label: '商品ID', prop: 'goodsId'},
        {label: '上新日期(商品)', prop: 'upNewDate'},
        {label: '商品标签(商品)', prop: 'goodsLabel'},
        {label: '商品访客数(商品)', prop: 'goodsVisitorNumber'},
        {label: '平均停留时长(商品)', prop: 'averageStopDuration'},
        {label: '商品详情页跳出率(商品)', prop: 'goodsDetailJumpRatio'},
        {label: '商品收藏人数(商品)', prop: 'goodsCollectPeopleNumber'},
        {label: '商品加购人数(商品)', prop: 'goodsAddPurchasePeopleNumber'},
        {label: '支付买家数(商品)', prop: 'payBuyerNumber'},
        {label: '支付件数(商品)', prop: 'payNumber'},
        {label: '支付金额(商品)', prop: 'payAmount'},
        {label: '支付老买家数(商品)', prop: 'payOldBuyerNumber'},
        {label: '老买家支付金额(商品)', prop: 'oldBuyerPayAmount'},
        {label: '访客平均价值(商品)', prop: 'visitorAverageValue'},
        {label: '成功退款金额(商品)', prop: 'successRefundAmount'},
        {label: '竞争力评分(商品)', prop: 'competitiveScore'},
        {label: '年累计支付金额(商品)', prop: 'yearPayAmount'},
        {label: '搜索引导支付转化率(商品)', prop: 'searchPayRatio'},
        {label: '搜索引导访客数(商品)', prop: 'searchVisitorNumber'},
        {label: '搜索引导支付买家数(商品)', prop: 'searchBuyerNumber'},

        {label: '花费(全站推)', prop: 'costAmount'},
        {label: '总成交金额(全站推)', prop: 'totalTransactionAmount'},
        {label: '实际投产比(全站推)', prop: 'actualProductionRatio'},
        {label: '展现量(全站推)', prop: 'impressions'},
        {label: '点击量(全站推)', prop: 'hits'},
        {label: '点击率(全站推)', prop: 'clickRate'},
        {label: '平均点击花费(全站推)', prop: 'averageClickCost'},
        {label: '总成交笔数(全站推)', prop: 'totalTransactionsNumber'},
        {label: '点击转化率(全站推)', prop: 'clickConversionRate'},
        {label: '总购物车数(全站推)', prop: 'totalShopCartNumber'},

        {label: '点击转化率(无界)', prop: 'unClickConversionRate'},
        {label: '投入产出比(无界)', prop: 'inputOutputRatio'},
        {label: '旺旺咨询量(无界)', prop: 'wangConsultNumber'},
        {label: '成交人数(无界)', prop: 'dealPeopleNumber'},
      ],
      showSelectSetting: false,
      // 选中的表单项
      selectedItems: ['storeName', 'statDate', 'goodsId', 'upNewDate', 'goodsLabel', 'goodsVisitorNumber', 'payBuyerNumber', 'payAmount'],
    }
  },
  computed: {
    // 可见列计算属性
    visibleColumns() {
      //返回allColumns中visible为true的项。
      return this.allColumns.filter(column =>
        this.selectedHeaders.includes(column.prop)
      )
    }
  },
  created() {
    this.setStatDateDefaultDateRange()
    this.loadSettings()
    this.getStoreList();
  },
  // 监听路由参数变化
  watch: {
    "$route.query": {
      immediate: true, // 立即执行一次（相当于 created）
      handler(newQuery) {
        if (Object.keys(newQuery).length > 0) {
          this.handleQuerySelect(); // 执行查询
        }
      },
    },
  },
  methods: {
    //处理路由跳转查询
    handleQuerySelect() {
      this.queryParams.storeId = this.$route.query.storeId;
      this.queryParams.divName = this.$route.query.divName;
      this.queryParams.goodsLabel = this.$route.query.goodsLabel;
      this.queryParams.storeLeader = this.$route.query.storeLeader;
      this.queryParams.upNewDateStart = this.$route.query.upNewDateStart;
      this.queryParams.upNewDateEnd = this.$route.query.upNewDateEnd;
      this.queryParams.payBuyerNumberMin = this.$route.query.payBuyerNumberMin;
      this.queryParams.payBuyerNumberMax = this.$route.query.payBuyerNumberMax;
      this.queryParams.statDateRange = this.$route.query.statDateRange;

      //查询列表和汇总数据
      this.getList()
      this.getCollectDataNew()

      //查询完成后清空 query 参数
      this.$router.replace({
        path: '/operation/goodsIndicators', // 保持当前路径
        query: {}, // 清空 query
      });

      //重置查询参数
      this.queryParams.storeId = null;
      this.queryParams.divName = null;
      this.queryParams.goodsLabel = null;
      this.queryParams.storeLeader = null;
      this.queryParams.upNewDateStart = null;
      this.queryParams.upNewDateEnd = null;
      this.queryParams.payBuyerNumberMin = null;
      this.queryParams.payBuyerNumberMax = null;
    },
    //设置统计日期默认值,默认查询最新日期数据
    setStatDateDefaultDateRange() {
      const today = new Date()
      const yesterday = new Date()

      // 设置为昨天和今天
      yesterday.setDate(today.getDate() - 1)

      // 格式化为 'YYYY-MM-DD' 字符串（避免时区问题）
      const formatDate = (date) => {
        const y = date.getFullYear()
        const m = String(date.getMonth() + 1).padStart(2, '0')
        const d = String(date.getDate()).padStart(2, '0')
        return `${y}-${m}-${d}`
      }
      this.queryParams.statDateRange = [formatDate(yesterday), formatDate(today)]
    },
    //日期条件筛选汇总
    getSearchByDate(item) {
      const today = new Date();
      if (item === 1) {
        // 获取昨天的日期
        const yesterday = new Date(today);
        yesterday.setDate(today.getDate() - 1);

        const yesterdayFormat = this.formatDate(yesterday);

        this.queryParams.statDateRange = [yesterdayFormat, yesterdayFormat]
      } else if (item === 2) {
        // 获取当前日期是本周的第几天（0=周日，1=周一，...，6=周六）
        const currentDayOfWeek = today.getDay();

        // 计算上周周一的日期
        const lastMonday = new Date(today);
        lastMonday.setDate(today.getDate() - currentDayOfWeek - 6); // 减去当前星期几和 6 天

        // 计算上周周日的日期
        const lastSunday = new Date(today);
        lastSunday.setDate(today.getDate() - currentDayOfWeek); // 减去当前星期几

        const lastMondayFormat = this.formatDate(lastMonday)
        const lastSundayFormat = this.formatDate(lastSunday)

        this.queryParams.statDateRange = [lastMondayFormat, lastSundayFormat]
      } else if (item === 3) {
        // 获取上个月的最后一天
        const lastDayOfLastMonth = new Date(today.getFullYear(), today.getMonth(), 0);

        // 获取上个月的第一天
        const firstDayOfLastMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1);

        const firstDayFormat = this.formatDate(firstDayOfLastMonth)
        const lastDayFormat = this.formatDate(lastDayOfLastMonth)

        this.queryParams.statDateRange = [firstDayFormat, lastDayFormat]
      } else if (item === 4) {
        // 获取一年前的日期
        const oneYearAgo = new Date(today);
        oneYearAgo.setFullYear(today.getFullYear() - 1);

        const lastYearFormat = this.formatDate(oneYearAgo)
        const todayFormat = this.formatDate(today)

        this.queryParams.statDateRange = [lastYearFormat, todayFormat]
      }

      this.handleQuery(true)
    },
    //格式化日期
    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，需要加 1
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    //获取汇总数据
    getCollectDataNew() {
      getCollectData(this.queryParams).then(response => {
        this.collectData = response.data
      })
      //展示合计
      this.showSummary = true
      this.dataTotal = new Date().getTime()
    },
    //返回表格合计数据,进行数据格式化处理
    getScoreSummaries(param) {
      const {columns, data} = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (column.property === 'statDate') {
          sums[index] = this.collectData.statDateStart + '至' + this.collectData.statDateEnd
        } else if (this.selectedHeaders.includes(column.property)) {
          if ((['goodsDetailJumpRatio', 'orderConversionRatio', 'goodsPayConversionRatio', 'searchPayRatio', 'structuredDetailConversionRatio',
            'clickRate', 'clickConversionRate', 'clickRatio', 'unClickConversionRate', 'addPurchaseRatio', 'goodsCollectRatio', 'joinRate', 'guideVisitRatio',
            'newPeopleClickRatio', 'newPeopleDealConversionRate', 'promotionRatio'].includes(column.property))) {
            if (this.collectData[column.property] === null) {
              this.collectData[column.property] = 0
            }
            sums[index] = (parseFloat(this.collectData[column.property]) * 100).toFixed(2) + '%'
          } else {
            sums[index] = typeof this.collectData[column.property] != 'number' ? this.collectData[column.property] : parseFloat(this.collectData[column.property]).toFixed(2)
          }
        }
      })
      sums[0] = '合计'
      return sums
    },
    //上新日期组件改变值
    upNewDateChange() {
      if (this.queryParams.upNewDateRange === null) {
        this.queryParams.upNewDateStart = null
        this.queryParams.upNewDateEnd = null
      } else {
        this.queryParams.upNewDateStart = this.queryParams.upNewDateRange[0]
        this.queryParams.upNewDateEnd = this.queryParams.upNewDateRange[1]
      }
    },
    //后端全页面动态排序
    sortChange(column) {
      this.queryParams.order = null
      this.queryParams.prop = null
      if (column.order === "ascending") {
        this.queryParams.order = "asc"
      } else if (column.order === "descending") {
        this.queryParams.order = "desc"
      }

      this.queryParams.prop = column.prop;

      this.getList()
    },
    parseTime,
    /** 查询商品指标数据列表 */
    getList() {
      this.loading = true;
      //统计日期范围赋值
      if (this.queryParams.statDateRange !== null) {
        this.queryParams.statDateStart = this.queryParams.statDateRange[0]
        this.queryParams.statDateEnd = this.queryParams.statDateRange[1]
      } else {
        this.queryParams.statDateStart = null
        this.queryParams.statDateEnd = null
      }
      //赋值动态表头信息
      this.queryParams.columns = this.selectedHeaders
      listGoodsIndicators(this.queryParams).then(response => {
        this.goodsIndicatorsList = response.rows;
        this.goodsIndicatorsList.forEach(item => {
          item.clickRate = item.clickRate === null ? '' : (parseFloat(item.clickRate) * 100).toFixed(2) + '%'
          item.clickConversionRate = item.clickConversionRate === null ? '' : (parseFloat(item.clickConversionRate) * 100).toFixed(2) + '%'
          item.clickRatio = item.clickRatio === null ? '' : (parseFloat(item.clickRatio) * 100).toFixed(2) + '%'
          item.unClickConversionRate = item.unClickConversionRate === null ? '' : (parseFloat(item.unClickConversionRate) * 100).toFixed(2) + '%'
          item.addPurchaseRatio = item.addPurchaseRatio === null ? '' : (parseFloat(item.addPurchaseRatio) * 100).toFixed(2) + '%'
          item.goodsCollectRatio = item.goodsCollectRatio === null ? '' : (parseFloat(item.goodsCollectRatio) * 100).toFixed(2) + '%'
          item.joinRate = item.joinRate === null ? '' : (parseFloat(item.joinRate) * 100).toFixed(2) + '%'
          item.guideVisitRatio = item.guideVisitRatio === null ? '' : (parseFloat(item.guideVisitRatio) * 100).toFixed(2) + '%'
          item.newPeopleDealConversionRate = item.newPeopleDealConversionRate === null ? '' : (parseFloat(item.newPeopleDealConversionRate) * 100).toFixed(2) + '%'
          item.promotionRatio = item.promotionRatio === null ? '' : (parseFloat(item.promotionRatio) * 100).toFixed(2) + '%'
        })
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        storeName: null,
        statDateRange: null,
        statDateStart: null,
        statDateEnd: null,
        upNewDateRange: null,
        upNewDateStart: null,
        upNewDateEnd: null,
        goodsId: null,
        goodsLabel: null,
        goodsVisitorNumberMin: null,
        goodsVisitorNumberMax: null,
        averageStopDurationMin: null,
        averageStopDurationMax: null,
        goodsDetailJumpRatioMin: null,
        goodsDetailJumpRatioMax: null,
        goodsCollectPeopleNumberMin: null,
        goodsCollectPeopleNumberMax: null,
        goodsAddPurchasePeopleNumberMin: null,
        goodsAddPurchasePeopleNumberMax: null,
        payBuyerNumberMin: null,
        payBuyerNumberMax: null,
        payNumberMin: null,
        payNumberMax: null,
        payAmountMin: null,
        payAmountMax: null,
        payOldBuyerNumberMin: null,
        payOldBuyerNumberMax: null,
        oldBuyerPayAmountMin: null,
        oldBuyerPayAmountMax: null,
        visitorAverageValueMin: null,
        visitorAverageValueMax: null,
        successRefundAmountMin: null,
        successRefundAmountMax: null,
        competitiveScoreMin: null,
        competitiveScoreMax: null,
        yearPayAmountMin: null,
        yearPayAmountMax: null,
        searchPayRatioMin: null,
        searchPayRatioMax: null,
        searchVisitorNumberMin: null,
        searchVisitorNumberMax: null,
        searchBuyerNumberMin: null,
        searchBuyerNumberMax: null,
        costAmountMin: null,
        costAmountMax: null,
        totalTransactionAmountMin: null,
        totalTransactionAmountMax: null,
        actualProductionRatioMin: null,
        actualProductionRatioMax: null,
        impressionsMin: null,
        impressionsMax: null,
        hitsMin: null,
        hitsMax: null,
        clickRateMin: null,
        clickRateMax: null,
        averageClickCostMin: null,
        averageClickCostMax: null,
        totalTransactionsNumberMin: null,
        totalTransactionsNumberMax: null,
        clickConversionRateMin: null,
        clickConversionRateMax: null,
        totalShopCartNumberMin: null,
        totalShopCartNumberMax: null,
        unClickConversionRateMin: null,
        unClickConversionRateMax: null,
        inputOutputRatioMin: null,
        inputOutputRatioMax: null,
        wangConsultNumberMin: null,
        wangConsultNumberMax: null,
        dealPeopleNumberMin: null,
        dealPeopleNumberMax: null,
        //路由跳转携带参数
        storeId: null,
        divName: null,
        storeLeader: null
      };
      this.$resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery(flag) {
      this.queryParams.pageNum = 1;
      this.getList();

      //搜索展示合计，重置关闭合计
      if (flag) {
        //计算汇总合计
        this.getCollectDataNew();
      } else {
        this.showSummary = false
      }
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.$resetForm("queryForm");
      this.queryParams.storeName = null
      this.queryParams.statDateRange = null
      this.queryParams.statDateStart = null
      this.queryParams.statDateEnd = null
      this.queryParams.upNewDateRange = null
      this.queryParams.upNewDateStart = null
      this.queryParams.upNewDateEnd = null
      this.queryParams.goodsId = null
      this.queryParams.goodsLabel = null
      this.queryParams.goodsVisitorNumberMin = null
      this.queryParams.goodsVisitorNumberMax = null
      this.queryParams.averageStopDurationMin = null
      this.queryParams.averageStopDurationMax = null
      this.queryParams.goodsDetailJumpRatioMin = null
      this.queryParams.goodsDetailJumpRatioMax = null
      this.queryParams.goodsCollectPeopleNumberMin = null
      this.queryParams.goodsCollectPeopleNumberMax = null
      this.queryParams.goodsAddPurchasePeopleNumberMin = null
      this.queryParams.goodsAddPurchasePeopleNumberMax = null
      this.queryParams.payBuyerNumberMin = null
      this.queryParams.payBuyerNumberMax = null
      this.queryParams.payNumberMin = null
      this.queryParams.payNumberMax = null
      this.queryParams.payAmountMin = null
      this.queryParams.payAmountMax = null
      this.queryParams.payOldBuyerNumberMin = null
      this.queryParams.payOldBuyerNumberMax = null
      this.queryParams.oldBuyerPayAmountMin = null
      this.queryParams.oldBuyerPayAmountMax = null
      this.queryParams.visitorAverageValueMin = null
      this.queryParams.visitorAverageValueMax = null
      this.queryParams.successRefundAmountMin = null
      this.queryParams.successRefundAmountMax = null
      this.queryParams.competitiveScoreMin = null
      this.queryParams.competitiveScoreMax = null
      this.queryParams.yearPayAmountMin = null
      this.queryParams.yearPayAmountMax = null
      this.queryParams.searchPayRatioMin = null
      this.queryParams.searchPayRatioMax = null
      this.queryParams.searchVisitorNumberMin = null
      this.queryParams.searchVisitorNumberMax = null
      this.queryParams.searchBuyerNumberMin = null
      this.queryParams.searchBuyerNumberMax = null
      this.queryParams.costAmountMin = null
      this.queryParams.costAmountMax = null
      this.queryParams.totalTransactionAmountMin = null
      this.queryParams.totalTransactionAmountMax = null
      this.queryParams.actualProductionRatioMin = null
      this.queryParams.actualProductionRatioMax = null
      this.queryParams.impressionsMin = null
      this.queryParams.impressionsMax = null
      this.queryParams.hitsMin = null
      this.queryParams.hitsMax = null
      this.queryParams.clickRateMin = null
      this.queryParams.clickRateMax = null
      this.queryParams.averageClickCostMin = null
      this.queryParams.averageClickCostMax = null
      this.queryParams.totalTransactionsNumberMin = null
      this.queryParams.totalTransactionsNumberMax = null
      this.queryParams.clickConversionRateMin = null
      this.queryParams.clickConversionRateMax = null
      this.queryParams.totalShopCartNumberMin = null
      this.queryParams.totalShopCartNumberMax = null
      this.queryParams.unClickConversionRateMin = null
      this.queryParams.unClickConversionRateMax = null
      this.queryParams.inputOutputRatioMin = null
      this.queryParams.inputOutputRatioMax = null
      this.queryParams.wangConsultNumberMin = null
      this.queryParams.wangConsultNumberMax = null
      this.queryParams.dealPeopleNumberMin = null
      this.queryParams.dealPeopleNumberMax = null
      this.setStatDateDefaultDateRange()
      this.handleQuery(false);
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加商品指标数据";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getIndicatorsInfo(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改商品指标数据";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            editIndicatorsInfo(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addGoodsIndicators(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm("是否确认删除选中的商品指标数据项？").then(function () {
        return delGoodsIndicators({ids: ids});
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      if (this.goodsIndicatorsList.length === 0) {
        this.$modal.msgWarning("请先查询数据后下载");
        return
      }
      //统计日期范围赋值
      if (this.queryParams.statDateRange !== null) {
        this.queryParams.statDateStart = this.queryParams.statDateRange[0]
        this.queryParams.statDateEnd = this.queryParams.statDateRange[1]
      } else {
        this.queryParams.statDateStart = null
        this.queryParams.statDateEnd = null
      }
      //赋值动态表头信息
      this.queryParams.columns = this.selectedHeaders
      exportExcel(this.queryParams)
    },
    //获取所负责的店铺列表
    getStoreList() {
      getStoreList().then(response => {
        this.storeList = response.data;
      })
    },
    // 保存设置
    saveSettings() {
      // 更新列显示状态
      this.allColumns.forEach(column => {
        column.visible = this.selectedHeaders.includes(column.prop)
      })

      // 保存到本地存储
      localStorage.setItem('tableHeaders', JSON.stringify(this.selectedHeaders))
      this.showSetting = false

      this.getList();
    },
    // 加载保存的设置
    loadSettings() {
      const saved = localStorage.getItem('tableHeaders')
      if (saved) {
        this.selectedHeaders = JSON.parse(saved)
      } else {
        // 默认选中可见的列
        this.selectedHeaders = this.allColumns
          .filter(column => column.visible)
          .map(column => column.prop)
      }
    },
    //表头选择按照选择顺序展示
    getVisibleColumns() {
      let list = []
      this.selectedHeaders.map(i => {
        this.visibleColumns.map(x => {
          if (x.prop === i) {
            list.push(x)
          }
        })
      })
      return list
    },
    //保存选择的动态搜索条件
    saveSelectSettings() {
      this.showSelectSetting = false
    },
    //是否展示搜索条件
    isShowSearch(prop) {
      return this.selectedItems.includes(prop);
    },
    //取消动态表头的选择
    cancelSelectedHeaders() {
      this.selectedHeaders = []
    },
    //常用指标选择
    useSelectedHeaders() {
      this.selectedHeaders = ['storeName', 'statDate', 'goodsId', 'imgUrl', 'upNewDate', 'goodsLabel', 'payAmount', 'payBuyerNumber', 'promotionExpenses', 'promotionRoi', 'promotionRatio', 'costAmount',
        'wholeRoi', 'spend', 'unRoi', 'averageClickSpend', 'goodsStatus', 'competitiveScore', 'yearPayAmount']
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .el-table td.el-table__cell div {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 针对 Webkit 内核浏览器（Chrome/Safari/Edge） */
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  height: 9px; /* 滚动条高度 */
}

</style>
